/**
 * Created by YHB on 2015/6/28.
 */
define(['backbone', 'text!../../tpl/nav.html', 'text!../../tpl/travels/travelsnav.html', 'config'],
    function(Backbone, navTemplate, travelsNavTemplate, CONSTANT){
    var TravelsView = Backbone.View.extend({

        el: '#view-container',

        initialize: function () {
            $(document).on('tap', this.documentClickHandler);
        },

        render: function () {
            var nav = [{
                title: '游记'
            }]
            this.$el.html(_.template(navTemplate)(nav)); //现将导航渲染

            this.$el.append(_.template(travelsNavTemplate)(CONSTANT.TRAVELS_AREA)); //现将导航渲染

            this.oAreaNavLabels = $('#area_nav .label');
            this.oAreaNavLabelUls = $('#area_nav .label ul');
        },

        events: {
            'tap #area_nav .label': 'expandArea'
        },

        expandArea: function (e) {
            var oCurrentTarget = $(e.currentTarget);

            if(oCurrentTarget.hasClass('active')){
                oCurrentTarget.removeClass('active').find('ul').removeClass('active');
                oCurrentTarget.find('.arrow').removeClass('up').addClass('down');
            } else {
                var oLabel = $('#area_nav .label');
                oLabel.removeClass('active');
                oLabel.find('ul').removeClass('active');
                oLabel.find('.arrow').removeClass('down').addClass('down');

                oCurrentTarget.addClass('active').find('ul').addClass('active');
                oCurrentTarget.find('.arrow').removeClass('down').addClass('up');
            }

            e.preventDefault();
            e.stopPropagation();
        },

        //点击不是这个区域则隐藏
        documentClickHandler: function (e) {
            if(!$(e.target).closest('#area_nav-box').length){ //点击是在外面
                var oLabel = $('#area_nav .label');
                oLabel.removeClass('active');
                oLabel.find('ul').removeClass('active');
                oLabel.find('.arrow').removeClass('up').addClass('down')
            }
        }
    });

    return TravelsView;
});
